<template>
<div id="step2">
    <header>
        <span class="bill_text" id="billText">人脸识别</span>
        <span data-tostep="1" id="fh_step" class="icons-fanhui"></span>
    </header>
    <div id="demo-box">
    </div>

    <div id="step-box_parent">
        <ul class="step-box">
            <li><span>点击“开始验证”</span>，进入视频录制</li>
            <li>切换至前置摄像头(如需)，<span>点击“录制”</span></li>
            <li>录制过程中，请保持头部居中，普通话<span class="read">匀速朗读：</span><span id="checkNumber">{{checkNumber}}</span>，视频请保持在3~7秒内</li>
            <li>点击“结束”，完成录制，并<span>“提交”</span>(如需)</li>
        </ul>
    </div>
    <div id="button-box">
        <a id="recording" @click="shootingVideo" href="javascript:;" class="weui-btn weui-btn_primary">开始验证</a>
    </div>
</div>
</template>

<script>
export default  {
    name: 'Step',
    data:function  () {
        return {
           checkNumber:""
        }
    },
    beforeMount:function  () {
        $.post(getCheckNumServlet, {}, function  (msg) {
            if (msg.code == "0000") {
                this.checkNumber = msg.data.validate_data;
                this.$store.commit("changeValidateData",msg.data.validate_data);
            } else if (msg.code == "0012" || msg.code == "0131") {
                if (msg.msg) {
                    this.$store.commit("changeAlertContent",msg.msg);
                } else {
                    this.$store.commit("changeAlertContent","当前用户没有查询权限。");
                }

            } else if (msg.msg) {
                this.$store.commit("changeAlertContent",msg.msg);
            } else {
                this.$store.commit("changeAlertContent", "人脸识别字符串获取失败");
            }

            if (msg.code != "0000") {
                this.$store.commit("changeIsAlert",true);
            }
        }.bind(this))
    },
    methods:{
        // 拍摄视频按钮事件
        shootingVideo:function() {
            var _this = this;
            /*******调试*************/
        /*        $("#step2").hide();
                $("#step3").show();
                setStepLoader(1);
                //        window.step++;  // 跳过视频验证
                youtuDetect("0001");
                return;*/
            /********调试*************/
            var sourceType = "camera";
            var camera = "front"; // front 前置摄像头 back 后置摄像头
            var maxDuration = 7; // $('#max').val();
            //  console.log(sourceType, camera, maxDuration);
            WeixinJSBridge.invoke('chooseVideo', {
                sourceType: sourceType,
                maxDuration: maxDuration,
                camera: camera
            }, function(res) {
                if (res.localId) {
                    alert(JSON.stringify(res.localId));
                    _this.$store.commit("changeLocalId",res.localId);
                    location.hash = "/process";
//                   setStepLoader(1); // 开始验证
//                   localId = res.localId;
//                   wxUpload(localId);
                }else{
                    if (res.errMsg) {
                        _this.$store.commit("changeAlertContent",res.errMsg);
                    } else {
                        _this.$store.commit("changeAlertContent","拍摄视频失败");

                    }
                    _this.$store.commit("changeIsAlert",true)
                }
         });


        }
    }
}
</script>

<style lang='scss' scoped>
#step2 header {
    background: url(../assets/img/beijingtu1_icon.png) 0 0;
    background-size: 100% 100%;
}
#demo-box {
    width: 100%;
    height: 150px;
    background: url(../assets/img/beijingtu2_icon.png) 0 0;
    background-size: 100% 100%;
}
#step-box_parent {
    width: 100%;
    ul {
        padding: 15px 20px;
    }
    li {
        color: #222;
        font-size: 17px;
        font-family: helvetica;
        //      line-height: 34px;
        padding-bottom: 5px;
        border-bottom: 1px solid #e5e5e5;
        padding-top: 10px;
        list-style-type: decimal;
        list-style-position: inside;
        padding-left: 20px;
        text-indent: -18px;
        display: none;
        span {
            font-weight: bold;
        }
        .read {
            color: #f00;
            font-size: 28px;
        }
        #checkNumber {
            color: #f00;
            font-size: 30px;
            vertical-align: initial;
        }
    }
}
#button-box a {
    display: none;
    margin: 0 15px 3px 15px;
}
</style>
